<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        院系：<input type="text" v-model="department">
        <hr>
        <p>学生姓名：<input type="text" v-model="student.name"></p >
        <p>学生年龄：<input type="number" v-model="student.age"></p >
    </div>
</body>

</html>
<script>
    const comApp = {
        date() {
            return {
                departemrnt: '软件学院',
                student: {
                    name: '张三',
                    age: 18
                }
            }
        },
        watch: {
            departemrnt(newData, oldData) {
                console.log('newData:' + newData)
                console.log('oldData:' + oldData)
            },
            'student.age'(newData, oldData) {
                console.log('newData:' + newData)
                console.log('oldData:' + oldData)
            }
        }
    };
    const app = Vue.createApp(comApp).mount("#app");
</script>